<template>
    <div>
        <van-form :ref="formData">
            <!-- 编辑节点1 -->
            <div v-if="this.subTaskInfo.status !== '3' ">
              <van-row class="rowLabel">
                <van-col span="12"  class="colCss">
                    <div class="taskName">文件编号：</div>
                    <div class="taskInfo">{{subTaskInfo.taskCode}}</div>
                </van-col>
                <van-col span="12"  class="colCss">
                    <div class="taskName">拆解日期：</div>
                    <div class="taskInfo">{{subTaskInfo.createTime}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12"  class="colCss">
                    <div class="taskName">拆解人：</div>
                    <div class="taskInfo">{{subTaskInfo.createByName}}</div>
                </van-col>
                <van-col span="12"  class="colCss">
                    <div class="taskName">拆解部门：</div>
                    <div class="taskInfo">{{subTaskInfo.departmentName}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12">
                    <van-field name="electricCoreType"
                            v-model="formData.electricCoreTypeName"
                            label="电芯型号：">
                      <template #input>
                        <van-radio-group v-model="formData.electricCoreType" direction="horizontal">
                          <van-radio v-for="(item,index) in electricCoreTypeList" 
                            :key="index"
                            :name="item.code" 
                            shape="square">
                            {{item.type}}
                        </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                </van-col>
                <van-col span="12">
                  <van-field name="electricCoreCode"
                            v-model="formData.electricCoreCode"
                            label="条码:"
                            size="small"
                            maxlength="40"
                            placeholder="请输入电芯编号"
                            :rules="[{ required: true, message: '请输入电芯编号' }]" />
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="24">
                    <van-field name="factoryCode"
                            v-model="formData.factoryCode"
                            label="生产工厂：">
                      <template #input>
                        <van-radio-group v-model="formData.factoryCode" direction="horizontal">
                          <van-radio v-for="(item,index) in factoryList" 
                            :key="index"
                            :name="item.code" 
                            shape="square">
                            {{item.type}}
                        </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="24">
                    <van-field name="cellTypeCode"
                            v-model="formData.cellTypeCode"
                            label="电芯类型：">
                      <template #input>
                        <van-radio-group v-model="formData.cellTypeCode" direction="horizontal">
                          <van-radio v-for="(item,index) in cellTypeList" 
                            :key="index"
                            :name="item.code" 
                            shape="square">
                            {{item.type}}
                        </van-radio>
                        </van-radio-group>
                      </template>
                    </van-field>
                </van-col>
              </van-row>
              <van-row  class="rowLabel">
                <van-col span="24">
                    <van-field name="checkboxGroup" label="缺陷类型：">
                      <template #input>
                        <van-checkbox-group v-model="defectTypeIdList" direction="horizontal">
                          <van-checkbox v-for="(item,index) in formData.currentNodeDefectTypeList" 
                          :key="index"
                          :name="item.defectTypeId" 
                          shape="square">
                          {{item.defectName}}
                        </van-checkbox>
                        </van-checkbox-group>
                      </template>
                  </van-field>
                </van-col>
              </van-row>
            </div>

            <!-- 查看节点1 -->
            <div v-if="this.subTaskInfo.status === '3' ">
              <van-row class="rowLabel">
                <van-col span="12"  class="colCss">
                    <div class="taskName">文件编号：</div>
                    <div class="taskInfo">{{subTaskInfo.taskCode}}</div>
                </van-col>
                <van-col span="12"  class="colCss">
                    <div class="taskName">拆解日期：</div>
                    <div class="taskInfo">{{subTaskInfo.createTime}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">拆解人：</div>
                  <div class="taskInfo">{{subTaskInfo.createByName}}</div>
                </van-col>
                <van-col span="12" class="colCss">
                    <div class="taskName">拆解部门：</div>
                    <div class="taskInfo">{{subTaskInfo.departmentName}}</div>
                </van-col>
              </van-row>
              <van-row  class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">电芯型号：</div>
                  <div class="taskInfo">{{formData.electricCoreTypeName}}</div>
                </van-col>
                <van-col span="12" class="colCss">
                  <div class="taskName">条码:</div>
                  <div class="taskInfo">{{formData.electricCoreCode}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">电芯类型：</div>
                  <div class="taskInfo">{{formData.cellTypeName}}</div>
                </van-col>
                <van-col span="12" class="colCss">
                  <div class="taskName">缺陷类型：</div>
                  <div class="taskInfo">
                    <div v-if="formData.defectTypeNameList">
                        {{ formData.defectTypeNameList.join('、') }}
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row  class="rowLabel">
                <van-col span="24" class="colCss">
                  <div class="taskName">生产工厂：</div>
                  <div class="taskInfo">
                    {{formData.factoryName}}
                  </div>
                </van-col>
              </van-row>
            </div>
          </van-form>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import uploader from '../uploader.vue';
    import { deleteTaskNodeFile } from "@/apis/index";
    import { getElectricCoreTypeList } from "@/apis/index";
    import { getCellTypeList } from "@/apis/index";
    import { getFactoryList } from "@/apis/index";

    export default {
        name: 'Form1', 
        props: {
            formDataProp: {
                type: Object,
                default: {}
            },
            mainTaskInfoProp: {
                type: Object,
                default: {}
            },
            subTaskInfoProp: {
                type: Object,
                default: {}
            },
            taskNodeNameProp: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
              formData: {},
              subTaskInfo: {},
              mainTaskInfo: {},
              taskNodeName: '',
              defectTypeIdList: [],
              electricCoreTypeList: [],
              electricCoreTypeColumns: [],
              cellTypeList:[],
              factoryList: [],
              showElectricCoreTypeChoice: false
            }
        },
        created() {
        },
        mounted() {
          this.initElectricCoreTypeList();
          this.initCellTypeList();
          this.initFactoryList();
        },
        watch: {
            formDataProp: {
                handler(newVal, oldVal) {
                    this.formData = newVal;
                    this.formData.currentNodeDefectTypeList = newVal.currentNodeDefectTypeList;
                    this.defectTypeIdList = []
                    if (this.formData.defectTypeList) {
                      this.defectTypeIdList = this.formData.defectTypeList.map(item => {
                        return item.defectTypeId
                      })
                    }
                },
                deep: true,
                immediate: true
            },
            mainTaskInfoProp: {
                handler(newVal, oldVal) {
                    this.mainTaskInfo = newVal;
                },
                deep: true,
                immediate: true
            },
            subTaskInfoProp: {
                handler(newVal, oldVal) {
                    this.subTaskInfo = newVal;
                },
                deep: true,
                immediate: true
            },
            taskNodeNameProp: {
                handler(newVal, oldVal) {
                    this.taskNodeName = newVal;
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
          getFormData(commonParam) {
            let param = JSON.parse(JSON.stringify(commonParam));
            let defectTypeList = [];
            this.formData.currentNodeDefectTypeList.forEach(e => {
                if (this.defectTypeIdList.indexOf(e.defectTypeId) > -1) {
                  defectTypeList.push({
                    defectTypeId: e.defectTypeId,
                    defectName: e.defectName
                  })
                }
            });
            param.defectTypeList = defectTypeList;
            param.defectTypeIdList = this.defectTypeIdList;
            param.remark = this.formData.remark;
            param.electricCoreType = this.formData.electricCoreType;
            param.electricCoreTypeName = this.formData.electricCoreTypeName;
            param.electricCoreCode = this.formData.electricCoreCode;
            param.factoryCode = this.formData.factoryCode;
            param.cellTypeCode = this.formData.cellTypeCode;
            return param
          },
          initElectricCoreTypeList() {
            getElectricCoreTypeList().then(res => {
              if (res.code === 1) {
                this.electricCoreTypeList = res.data;
              }
            });
          },
          initCellTypeList() {
            getCellTypeList().then(res => {
              if (res.code === 1) {
                this.cellTypeList = res.data;
              }
            })
          },
          initFactoryList() {
            getFactoryList().then(res => {
              if (res.code === 1) {
                this.factoryList = res.data;
              }
            })
          },
          closeElectricCoreTypeChoice() {
            this.showElectricCoreTypeChoice = false
          },
          selectElectricCoreTypeChoice(selectedValues) {
            this.showElectricCoreTypeChoice = false;
            this.formData.electricCoreType = selectedValues.value;
            this.formData.electricCoreTypeName = selectedValues.text;
          }
        },
        components: { uploader }
    }
</script>

<style lang="scss" scoped>
.rowLabel {
  color: #646566;
  .colCss {
    padding: 10px 16px;
  }
}

.rowLabel{
  .taskName{
    display: inline-block;
    width: 6.2em;
  }
  .taskInfo{
    display: inline-block;
    margin-left:12px;
  }
}

.defectSelect{
  .van-cell__value,.van-field__value{
    border: none!important;
    padding: 0px!important;
  }
}
</style>